<template>
	<div class="ui-pane">
		<ui-header headertit="tips"></ui-header>
		<div class="ui-content">
			<arealine linetit="图片弹出列表"></arealine>
      <div class="img_box">
        <div v-for="(item,index) in imglist" @click="imgClick(index)">
          <img :src="item" />
        </div>
      </div>
      <imglist v-if="imglistmodalisshow" :index="crtIndex" :imglist="imglist" @closeMolde="closeMolde"></imglist>
		</div>
	</div>
</template>

<script>
  import imglist from '../../../../components/ghViewImgList/viewimglist.vue'
	export default {
    data() {
    	return {
        imglist: [
          'http://p1.music.126.net/gWTBbLJfla0LT74mwDildA==/109951165477221000.jpg?imageView&quality=89',
          'http://p1.music.126.net/EZCbqP87wGuZ5XcECFRqxg==/109951165477895371.jpg?imageView&quality=89',
          'http://p1.music.126.net/H6sKYEA8-xhhBb8yRkcioA==/109951165477267723.jpg?imageView&quality=89',
          'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1789379040,3595596079&fm=26&gp=0.jpg'
        ],
        swiperIsShow:false,
        cutIndex:0,
        imglistmodalisshow:false,
        crtIndex:0
    	}

    },
    components:{
      imglist
    },
    methods:{
      imgClick(index){
          this.imglistmodalisshow = true;
          this.crtIndex = index;
      },
      closeMolde(){
          this.imglistmodalisshow = false;
      }
    }
	}
</script>

<style scoped="scoped">
  .img_box{
    display: flex;
    flex-wrap: wrap;
    margin: .3rem .25rem;
  }

  .img_box>div{
    width: 3rem;
    height: 3rem;
    padding: 2px;
    overflow: hidden;
  }

  .img_box>div img{
    display: block;
    height: 100%;
  }
</style>
